<template>
  <div>
    <Header />
    <div class="header">
      <img
        src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png"
        alt=""
      />
    </div>
    <div class="sortnav">
      <div
        :class="{ act: isActive == 'complex' }"
        @click="isActive = 'complex'"
      >
        综合
      </div>
      <div
        class="price"
        :class="{ act: isActive == 'price' }"
        @click="changeSequence"
      >
        价格
        <span class="arrow" v-if="order == ''"></span>
        <span class="desc" v-else-if="order == 'asc'"></span>
        <span class="asc" v-else></span>
      </div>
      <div
        :class="{ act: isActive == 'classify' }"
        @click="isActive = 'classify'"
      >
        分类
      </div>
    </div>
    <div class="goods-list">
      <router-link
        :to="{ path: '/detail', query: { id: goods.id } }"
        tag="div"
        class="item"
        v-for="goods in list"
        :key="goods.id"
      >
        <img class="goods-img" :src="goods.list_pic_url" alt="" />
        <p>{{ goods.name }}</p>
        <p class="price">￥{{ goods.retail_price }}</p>
      </router-link>
    </div>
  </div>
</template>
<script>
import Header from "@/components/header/header.vue";
import { goodsList } from "@/api/home";
export default {
  components: {
    Header,
  },
  data() {
    return {
      isNew: "",
      order: "",
      list: "",
      isActive: "",
      page: 0,
      type: "",
    };
  },
  methods: {
    changeSequence() {
      this.isActive = "price";
      if (this.order == "" || this.order == "desc") {
        this.order = "asc";
        this.init();
      } else {
        this.order = "desc";
        this.init();
      }
    },
    init() {
      if (this.type == "isNew") {
        goodsList({ isNew: 1, order: this.order }).then((res) => {
          this.list = res.data;
        });
      } else {
        goodsList({ isHot: 1, order: this.order }).then((res) => {
          this.list = res.data;
        });
      }
    },
  },
  created() {
    this.type = Object.keys(this.$route.query)[0];
    this.page = this.$route.query.isNew;
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.header {
  width: 375px;
  img {
    width: 375px;
  }
}
.sortnav {
  display: flex;
  height: 40px;
  background-color: #fff;
  margin-bottom: 10px;
  div {
    width: 33%;
    text-align: center;
    height: 100%;
    line-height: 40px;
  }
  .price {
    position: relative;
    span {
      position: absolute;
      top: 50%;
      right: 30%;
      transform: translate(0, -50%);
      height: 10px;
      width: 10px;
    }
    .arrow {
      background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/no-3127092a69.png)
        no-repeat;
      background-size: 100% 100%;
    }
    .desc {
      background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/down-95e035f3e5.png)
        no-repeat;
      background-size: 100% 100%;
    }
    .asc {
      background: url(http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/up-636b92c0a5.png)
        no-repeat;
      background-size: 100% 100%;
    }
  }
  div.act {
    color: #b4282d;
  }
}
.goods-list {
  width: 375px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 45%;

    .goods-img {
      width: 100%;
    }
  }
}
</style>